<script setup lang="ts">
// import { ArrowRight } from "@element-plus/icons-vue";
import type { TabsPaneContext } from "element-plus";
import {
	whManagerBsTbEnterpriseStatisticCountUsingPost,
	whManagerBsTbThirdUnitGetArchiveCountUsingGet,
	whManagerBsTbMessageGetPageUsingPost,
	whManagerBsTbRiskHazardsSpecialListUsingPost,
	whManagerBsTbEqpCheckGetPageUsingPost,
	whManagerBsTbParkGridPatrolRecordGetPageUsingPost,
	whManagerBsTbRiskHazardsHandleGetUnsupervisionCountUsingPost,
	whManagerBsTbRiskHazardsControlCountUsingPost,
	whManagerBsTbParkGridCountUsingPost,
	whManagerBsTbParkGridGetHazardListUsingPost,
	whManagerBsTbParkGridGetDangerListUsingPost,
	whManagerBsTbThirdUnitTypeStatisticUsingGet,
	whManagerBsTbThirdUnitLevelStatisticUsingGet,
	WhManagerBsTbEnterpriseShowIndustryGet,
} from "@/genapi/wh";
import {
	TASK_TYPE_MAP,
	TASK_STATUS_MAP,
	EQP_CHECK_TYPE_MAP,
	EQP_CHECK_STATUS_MAP,
	PARK_GRID_PATROL_RECORD_PATROL_STATUS_MAP,
	THIRD_LEVEL_MAP,
	FIRM_TYPE_MAP,
} from "@/config/enum-map";
import { useRouter } from "vue-router";

const router = useRouter();

onMounted(async () => {
	whManagerBsTbEnterpriseStatisticCountUsingPost({
		body: {},
	}).then((res) => {
		firmData.value = res.data;
	});

	whManagerBsTbThirdUnitGetArchiveCountUsingGet({ body: {} }).then((res) => {
		parkData.value = res.data;
	});

	whManagerBsTbMessageGetPageUsingPost({ data: {} }).then((res) => {
		informData.value = res.data?.records;
	});

	whManagerBsTbRiskHazardsSpecialListUsingPost({}).then((res) => {
		todayAssignmentData.value = res.data;
	});
	whManagerBsTbEqpCheckGetPageUsingPost({ data: {} }).then((res) => {
		secondTableData.value = res.data?.records;
	});
	whManagerBsTbParkGridPatrolRecordGetPageUsingPost({ data: {} }).then(
		(res) => {
			gridData.value = res;
		},
	);
	whManagerBsTbRiskHazardsHandleGetUnsupervisionCountUsingPost({}).then(
		(res) => {
			waitingReportCount.value = res.data;
		},
	);
	whManagerBsTbRiskHazardsControlCountUsingPost({}).then((res) => {
		riskHazardsControlCount.value = res.data;
	});
	whManagerBsTbParkGridCountUsingPost({}).then((res) => {
		parkGridCount.value = res.data;
	});
	whManagerBsTbParkGridGetHazardListUsingPost({}).then((res) => {
		hazardList.value = res.data;
	});
	const dangerListData = ref();
	whManagerBsTbParkGridGetDangerListUsingPost({}).then((res) => {
		dangerListData.value = res.data;
	});
	whManagerBsTbParkGridGetHazardListUsingPost({}).then((res) => {
		const hazardListData = res.data;
		const result = mergeArrays(dangerListData.value, hazardListData);
		option1.value.dataset.source = option1.value.dataset.source.concat(result);
	});

	whManagerBsTbThirdUnitTypeStatisticUsingGet({}).then((res) => {
		const data: Record<string, any> = [];
		const count1 = ref<number[]>([]);
		const percent1 = ref<string[]>([]);

		res.data?.forEach((item) => {
			data.push({
				value: item.count,
				name: FIRM_TYPE_MAP[item.type as string],
			});

			count1.value.push(item.count as number);
			percent1.value.push(item.percent as string);
		});
		(option3.value.series[0].data as Record<string, any>) = data;
		const dataArr = [
			{
				title: "企业类别",
				value: "数量",
				percent: "占比",
				color: "",
			},
			{
				title: "承包商",
				color: "#59AFFC",
				value: count1.value[0],
				percent: percent1.value[0],
			},
			{
				title: "供应商",
				color: "#64E1B5",
				value: count1.value[1],
				percent: percent1.value[1],
			},
			{
				title: "第三方机构",
				color: "#F8CC57 ",
				value: count1.value[2],
				percent: percent1.value[2],
			},
		];
		legendData.value.push(...dataArr);
	});
	whManagerBsTbThirdUnitLevelStatisticUsingGet({}).then((res) => {
		const count2 = ref<number[]>([]);
		const percent2 = ref<string[]>([]);
		const data: Record<string, any> = [];
		res.data?.forEach((item) => {
			data.push({
				value: item.count,
				name: THIRD_LEVEL_MAP[item.level as string],
			});
			(option3.value.series[1].data as Record<string, any>) = data;
			count2.value.push(item.count as number);
			percent2.value.push(item.percent as string);
		});
		const dataArr = [
			{
				title: "资质等级",
				value: "数量",
				percent: "占比",
				color: "",
			},
			{
				title: "特级资质",
				color: "#0F6CEA",
				value: count2.value[0],
				percent: percent2.value[0],
			},
			{
				title: "一级资质",
				color: "#008CE5",
				value: count2.value[1],
				percent: percent2.value[1],
			},
			{
				title: "二级资质",
				color: "#02BBF2",
				value: count2.value[2],
				percent: percent2.value[2],
			},
			{
				title: "四级资质",
				color: "#3AF2FE",
				value: count2.value[3],
				percent: percent2.value[3],
			},
		];
		legendData.value.push(...dataArr);
	});
	// WhManagerBsTbEnterpriseShowIndustryGet({}).then((res) => {
	// 	const data = Object.values(res.data);
	// 	data.forEach((item, index) => {
	// 		data[index] = Number(item);
	// 	});
	// 	option2.value.series[0].data = data;
	// 	option2.value.xAxis.data = Object.keys(res.data);
	// });
});

const hazardList = ref();
const parkGridCount = ref();
const riskHazardsControlCount = ref();
const waitingReportCount = ref();
const gridData = ref();
const secondTableData = ref();
const todayAssignmentData = ref();
const informData = ref();
const parkData = ref();
const firmData = ref();

const option2 = ref({
	grid: {
		left: "0%",
		right: "0%",
		bottom: "5%",
		top: 60,
		containLabel: true,
		z: 22,
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "line",
			lineStyle: {
				opacity: 0,
			},
		},
		formatter: function (prams) {
			if (prams[0].data === 0) {
				return "数量：0%";
			} else {
				return "数量：" + prams[0].data;
			}
		},
	},
	xAxis: {
		type: "category",
		data: [],
	},
	yAxis: {
		type: "value",
	},
	series: [
		{
			data: [],
			type: "bar",
			barWidth: "20%",
			xAxisIndex: 0,
			yAxisIndex: 0,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "#0286ff0f",
						},

						{
							offset: 1,
							color: "#0286ff",
						},
					]),
				},
			},
			zlevel: 11,
			showBackground: true,
			backgroundStyle: {
				color: "rgba(180, 180, 180, 0.2)",
				width: "120%",
			},
		},
	],
});

const option3 = ref({
	grid: {
		left: 300,
		bottom: "5%",
		top: 60,
		containLabel: true,
		z: 22,
	},
	tooltip: {
		trigger: "item",
		formatter: "{b}: {c} ({d}%)",
	},
	// legend: {
	// 	orient: "vertical",
	// 	x: "right",
	// 	data: ["一般隐患", "重大隐患", "已整改", "未整改"],
	// },
	series: [
		{
			name: "状态",
			type: "pie",
			selectedMode: "single",
			color: ["#59AFFC", "#64E1B5", "#F8CC57 "],
			radius: [0, "60%"],
			center: ["50%", "55%"],
			label: {
				normal: {
					position: "inner",
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
			},
			data: [],
		},
		{
			name: "类型",
			type: "pie",
			color: ["#0F6CEA", "#008CE5", "#02BBF2", "#3AF2FE"],
			radius: ["65%", "85%"],
			center: ["50%", "55%"],
			label: {
				normal: {
					position: "inner",
				},
			},
			labelLine: {
				normal: {
					show: false,
				},
			},
			data: [],
		},
	],
});
const legendData = ref<Record<string, any>>([]);

const option1 = ref({
	legend: {},
	tooltip: {},
	dataset: {
		source: [["product", "隐患数量", "风险数量"]],
	},
	xAxis: {
		type: "category",
	},
	yAxis: {},
	// Declare several bar series, each will be mapped
	// to a column of dataset.source by default.
	series: [
		{ type: "bar", barWidth: "10%" },
		{ type: "bar", barWidth: "10%" },
	],
});
const data = ref([
	{
		name: "企业网格数量",
		value: parkGridCount,
	},
	{
		name: "风险管控数量",
		value: riskHazardsControlCount,
	},
	{
		name: "待整改隐患数量",
		value: waitingReportCount,
	},
]);

const activeName = ref("first");

const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event);
};

const getStatusColor = (status: string) => {
	if (status === "施工中") {
		return "#E70000";
	} else if (status === "待施工") {
		return "#06C353";
	}
	return "#1D2129";
};

function formatTaskType(row, column) {
	return TASK_TYPE_MAP[row.taskType];
}

function more() {
	if (activeName.value === "first") {
		router.replace("/park/special-operation/special-operation");
	} else if (activeName.value === "second") {
		router.replace("/park/parking-maintenance/parking-maintenance");
	} else {
		router.replace("/park/grid-inspection/inspection-record");
	}
}
function getCheckStatusColor(status: string) {
	if (status === "正常" || status === "已完成") {
		return "#1D2129";
	} else {
		return "#E70000";
	}
}
function formatCheckType(row, col) {
	return EQP_CHECK_TYPE_MAP[row.status];
}

function mergeArrays(array1, array2) {
	const map = new Map();

	array1.forEach((item) => {
		map.set(item.name, { name: item.name, num1: item.num });
	});

	array2.forEach((item) => {
		if (map.has(item.name)) {
			map.get(item.name).num2 = item.num;
		} else {
			map.set(item.name, { name: item.name, num2: item.num });
		}
	});

	const mergedArray = Array.from(map.values()).map((item) => [
		item.name,
		item.num1 || null,
		item.num2 || null,
	]);

	return mergedArray;
}

function disposeClick(event, item) {
	const clickedElement = event.target;
	const spanContent = clickedElement
		.closest(".mesContent")
		.querySelector("span")
		.textContent.trim();

	if (spanContent.includes("装置开停车和大检修")) {
		router.replace("/park/parking-maintenance/parking-maintenance");
	} else if (spanContent.includes("企业资质即将到期")) {
		router.replace("/park/third-party/archives");
	} else if (spanContent.includes("企业风险")) {
		router.replace("/company/information");
	} else if (spanContent.includes("隐患风险上报")) {
		router.replace("/park/dual-prevention/reporting-of-hidden-dangers");
	}
}
</script>

<template>
	<div style="overflow-y: scroll; height: 1080px">
		<div class="statisticPanel">
			<div class="content">
				<div class="unitCount">
					<span class="text-[#2549CC]">园区企业总数</span>
					<div class="unitCountNum">
						<span pl-3 class="text-[#255ACC]" font-bold>{{ firmData }}</span>
					</div>
				</div>
				<div class="unitCount">
					<span class="text-[#2572CC]">第三方单位总数</span>
					<div class="unitCountNum">
						<span pl-3 class="text-[#2572CC]" font-bold>{{ parkData }}</span>
					</div>
				</div>
			</div>

			<div class="chartBox">
				<div class="chartTitle" mt-4>企业所属行业统计</div>
				<div class="chartContent">
					<BaseEchart :option="option2"></BaseEchart>
				</div>
			</div>
			<div class="chartBox">
				<div class="chartTitle" mt-4 ml-18>第三方单位统计</div>
				<div class="chartContent">
					<BaseEchart style="width: 50%" :option="option3"></BaseEchart>
					<div class="legendBox">
						<div class="legendItem" v-for="(item, i) in legendData" :key="i">
							<div
								class="colorBlock"
								:style="`background-color:${item.color};border-radius:50% 50%;width:15px;height:15px;`"
								:color="item.color"
							></div>
							<div>{{ item.title }}</div>
							<div>
								<span>{{ item.percent ?? 0 }}</span
								><span v-if="item.value !== '占比'">%</span>
							</div>
							<div>
								<span>{{ item.value ?? 0 }}</span
								><span v-if="item.value !== '数量'">个</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="display: flex; height: calc(100% - 300px 40px)">
			<div class="left">
				<div class="category">
					<div class="chartBox">
						<div class="chartTitle" text-xl font-semibold>双重预防机制统计</div>
						<div flex justify-between gap3>
							<div
								v-for="item in data"
								:key="item.name"
								flex
								justify-between
								px-8
								flex-1
								h-15
								items-center
								class="textBox"
							>
								<span>{{ item.name }}</span
								><span>{{ item.value }}</span>
							</div>
						</div>
						<div class="chartContent">
							<BaseEchart :option="option1"></BaseEchart>
						</div>
					</div>
				</div>
				<div class="todayAssignment">
					<div class="chartTitle" text-xl font-semibold>今日作业</div>
					<div mt-4 flex justify-between>
						<div text-lg>
							<el-tabs
								v-model="activeName"
								class="demo-tabs"
								@tab-click="handleClick"
								height="290px"
							>
								<el-tab-pane label="今日特殊作业" name="first">
									<div class="chartContent" style="padding: 20px 40px 0px 0px">
										<el-table
											:data="todayAssignmentData"
											show-overflow-tooltip
											style="width: 100%; height: 100%"
											:border="true"
											size="large"
										>
                    <el-table-column
												prop="taskUnit"
												label="作业名称"
												width="130"
												
											/>
											<el-table-column
												prop="taskType"
												label="作业类型"
												width="130"
												:formatter="formatTaskType"
											/>

											<el-table-column
												prop="latitude"
												label="经度"
												width="130"
											/>
											<el-table-column
												prop="longitude"
												label="纬度"
												width="130"
											/>
											<el-table-column
												prop="reportTime"
												label="实施时间"
												width="130"
											/>
											<el-table-column
												prop="taskMaster"
												label="作业负责人"
												width="130"
											/>
											<el-table-column
												prop="acceptance"
												label="验收人"
												width="130"
											/>
											<el-table-column
												prop="taskStatus"
												label="作业状态"
												width="130"
											>
												<template #default="scope">
													<span
														:style="{
															color: getStatusColor(
																TASK_STATUS_MAP[scope.row.taskStatus],
															),
														}"
													>
														{{ TASK_STATUS_MAP[scope.row.taskStatus] }}
													</span>
												</template>
											</el-table-column>
										</el-table>
									</div>
								</el-tab-pane>
								<el-tab-pane label="装置开停车和大检修" name="second">
									<el-table
										:data="secondTableData"
										show-overflow-tooltip
										style="width: 100%; height: 100%"
										:border="true"
										size="large"
									>
										<el-table-column
											prop="checkAddress"
											label="检修地址"
											width="130"
										/>

										<el-table-column
											prop="checkPlan"
											label="检修方案"
											width="130"
										/>
										<el-table-column
											prop="checkTimeStart"
											label="检修开始时间"
											width="130"
										/>
										<el-table-column
											prop="checkTimeEnd"
											label="检修结束时间"
											width="130"
										/>
										<el-table-column
											prop="type"
											label="检修类别"
											width="130"
											:formatter="formatCheckType"
										/>
										<el-table-column
											prop="acceptance"
											label="验收人"
											width="130"
										/>
										<el-table-column prop="status" label="检修状态" width="130">
											<template #default="scope">
												<span
													:style="{
														color: getCheckStatusColor(
															EQP_CHECK_STATUS_MAP[scope.row.status],
														),
													}"
												>
													{{ EQP_CHECK_STATUS_MAP[scope.row.status] }}
												</span>
											</template>
										</el-table-column>
									</el-table>
								</el-tab-pane>
								<el-tab-pane label="网络化巡检记录" name="third">
									<el-table
										:data="gridData"
										show-overflow-tooltip
										style="width: 100%; height: 100%"
										:border="true"
										size="large"
									>
										<el-table-column
											prop="gridName"
											label="网格名称"
											width="130"
										/>

										<el-table-column
											prop="patrolActualRoute"
											label="巡查实际路线"
											width="130"
										/>
										<el-table-column
											prop="patrolActualStartTime"
											label="实际开始时间"
											width="130"
										/>
										<el-table-column
											prop="patrolActualEndTime"
											label="实际结束时间"
											width="130"
										/>
										<el-table-column
											prop="type"
											label="检修类别"
											width="130"
											:formatter="formatCheckType"
										/>
										<el-table-column
											prop="teamLeaderName"
											label="队长名称"
											width="130"
										/>
										<el-table-column
											prop="patrolStatus"
											label="巡查状态"
											width="130"
										>
											<template #default="scope">
												<span
													:style="{
														color: getCheckStatusColor(
															PARK_GRID_PATROL_RECORD_PATROL_STATUS_MAP[
																scope.row.status
															],
														),
													}"
												>
													{{
														PARK_GRID_PATROL_RECORD_PATROL_STATUS_MAP[
															scope.row.status
														]
													}}
												</span>
											</template>
										</el-table-column>
									</el-table>
								</el-tab-pane>
							</el-tabs>
						</div>
						<div class="text-[#409EFF]" font-medium text-lg @click="more">
							<span cursor-pointer>查看更多</span>
							<span>
								<!-- <el-icon><ArrowRight /></el-icon -->
								></span
							>
						</div>
					</div>
				</div>
			</div>

			<div class="right" px-6>
				<div h-8 text-xl font-semibold mt-8>
					<span>通知</span>
				</div>
				<el-scrollbar style="height: calc(100% - 4rem - 32px)">
					<div
						class="mesContent"
						v-for="item in informData"
						:key="item.name"
						px-3
						@click="disposeClick($event, item)"
					>
						<div
							style="
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								line-height: 1.5;
								max-height: calc(1.5 * 2);
							"
						>
							<span class="text-[#3B445B]" font-medium text-lg>{{
								item.content
							}}</span>
						</div>
						<div class="text-[#9FB3C6]" flex justify-between items-center>
							<span>{{ item.dataTime }}</span>
							<div h-2 w-5>
								<img src="./assets/路径.png" alt="" h-full w-full />
							</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.statisticPanel {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 300px;
	display: flex;
	align-items: center;

	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 700px;
		height: 100%;
		padding: 15px;

		.unitCount {
			width: 80%;
			height: 125px;
			background-position: 90% 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 10px 15px;
			.unitCountNum {
				display: flex;
				font-size: 22px;
				img {
					margin-right: 5px;
				}
			}
			&:nth-child(1) {
				position: relative;
				background-image: url(./assets/purpleLine.png);
				background-repeat: no-repeat;
				&:nth-child(1)::before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background: linear-gradient(
						to bottom,
						rgba(171, 191, 255, 0.8),
						rgba(171, 191, 255, 0.2)
					);
				}
			}
			&:nth-child(2) {
				position: relative;
				background-image: url(./assets/blueLine.png);
				background-repeat: no-repeat;
				&:nth-child(2)::before {
					content: "";
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					background: linear-gradient(
						to bottom,
						rgba(190, 221, 255, 0.8),
						rgba(190, 221, 255, 0.2)
					);
				}
			}
		}
	}

	.chartBox {
		width: 50%;
		height: 100%;
		display: flex;
		flex-direction: column;
		font-size: 22px;
		font-weight: 500;
		.chartTitle {
			height: 32px;
		}
		.chartContent {
			width: 100%;
			height: calc(100% - 32px);
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-weight: 500;
			.legendBox {
				width: 300px;
				height: 200px;
				/* background-color: green; */
				font-size: 14px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.legendItem {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					div {
						width: 25%;
					}
				}
			}
		}
	}
}
.category {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 400px;
	width: 1200px;
	padding: 22px;
	.chartBox {
		width: 100%;
		height: 80%;

		font-size: 22px;
		font-weight: 500;
		.chartTitle {
			height: 32px;
		}
		.chartContent {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			font-weight: 500;
		}
		.textBox {
			margin-top: 15px;
			color: #2572cc;
			background: linear-gradient(
				180deg,
				#eff7ff 0%,
				rgba(239, 247, 255, 0.1) 100%
			);
		}
	}
}
.todayAssignment {
	background-color: #fff;
	margin: 20px 20px 0px 20px;
	height: 400px;
	width: 1200px;
	padding: 22px;
	height: 481px;
	.chartTitle {
		height: 32px;
	}
	.chartContent {
		width: 100%;
		height: 80%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-weight: 500;
	}
}
.right {
	background-color: #fff;
	margin: 20px 20px 0px 0px;
	height: 900px;
	width: 100%;
	.mesContent {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background: #ffffff;
		box-shadow: 0px 1px 2px 0px rgba(167, 167, 167, 0.5);
		border-radius: 4px;
		width: 100%;
		margin-bottom: 5px;
		height: 90px;
	}
}
:deep(.el-tabs__active-bar) {
	height: 0px;
}
:deep(.el-tabs__nav-wrap:after) {
	height: 0px;
}
:deep(.el-tabs__item) {
	font-size: 18px;
	color: #626e8b;
}
:deep(.el-tabs__item.is-active) {
	color: var(--el-color-primary);
}
:deep(.el-table) {
	height: 290px !important;
}
</style>
